<template>
  <div class="list-box">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
        <van-cell v-for="(item, index) in list" :key="index" class="list-item" @click="clickItem(item)">
            <img :src="item.imgUrl" alt="">
            <div class="conter-box">
                <div class="name">{{item.name}}</div>
                <div class="address">地址：{{item.address}}</div>
                <div class="details">
                    <div class="details1">
                        <span>${资产分类}</span>
                        |<span>${资产用途}</span>
                    </div>
                    <div class="details2">
                        <span>${统计数量名称}</span>
                        ：<span>${资产用途} ${统计单位}</span>
                    </div>
                </div>
            </div>
        </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            loading: false,
            finished: false,
            list: [
                {
                    id: 1,
                    name: '中电长城大厦北塔',
                    address: '广东省深圳市南山区粤海街道科发路火箭楼88号',
                    imgUrl: require('@/assets/asset.png')
                }
            ]
        }
    },
    computed: {},
    watch: {},
    created () {},
    methods: {
        onLoad() {
            // 异步更新数据
             // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                // for (let i = 0; i < 10; i++) {
                    this.list.push({
                        id: 1,
                        name: '中电长城大厦北塔',
                        address: '广东省深圳市南山区粤海街道科发路火箭楼88号',
                        imgUrl: require('@/assets/asset.png')
                    });
                // }
                // 加载状态结束
                this.loading = false;
                // 数据全部加载完成
                if (this.list.length >= 10) {
                    this.finished = true;
                }
            }, 1000);
        },
        clickItem(val) {
            console.log(val);
            this.$router.push({path: '/pmd'})
        }
    }
}
</script>

<style lang='less' scoped>
.list-box {
    background-color: #fff;
    border-radius: 10px;
    margin: 12px;
    padding: 12px;
    .list-item {
        .van-cell__value {
            display: flex;
            .conter-box {
                padding-left: 10px;
                width: calc(100% - 110px);
                .name {
                    font-size: 14px;
                    font-weight: bold;
                }
                .address {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #868B97 ;
                    font-size: 11px;
                    line-height: 22px;
                }
                .details {
                    font-size: 11px;
                    color: #868B97 ;
                    div {
                        line-height: 18px;
                    }
                }
            }
        }
    }
    img {
        width: 110px;
        height: 80px;
        border-radius: 4px;
    }
}
</style>
